class S2.FX.Operators.CssTransition
Description
Operator for invoking CSS Transition-based CSS animations, bypassing the scripty2 effects engine and using browser native CSS transitions.
This class is only defined if running on a browser that supports CSS transitions and CSS transition events.
Because of limitations with CSS transitions, only a subset of the features of the full JavaScript-based effects engine is supported.
- Transitions are limited to 'linear' and 'sinusoidal' (default)
- Some CSS properties can't be animated with CSS transitions
- The propertyTransitions option is not supported
S2.FX.Morph will automatically detect if a non-supported feature
is used and fall back to the JavaScript-based effects engine.
The use of the JavaScript engine can be forced by setting
the engine option to 'javascript'.
$('element_id').morph('width:400px', { engine: 'javascript' });
You can query the S2.Extensions.CSSTransitions property
to check if CSS transition support is enabled.
Hardware acceleration
In certain environments, the browser is able to use hardware acceleration to deliver much smoother animations. Normally this is only available with CSS transforms, since animation of any other property (even via CSS transitions) involves re-computing an element's layout with each frame of animation.
The CssTransition operator circumvents this by converting
certain property animations to their CSS-transform equivalents, if
possible. For instance, animating the movement of an absolutely-
positioned element can be expressed with a translate transformation,
assuming the element's dimensions do not change.
For more information on accelerated compositing, consult this page on the WebKit wiki.
Currently, only these environments support hardware acceleration:
- Safari 4.0 on OS X 10.6 (Snow Leopard)
- MobileSafari on iPhone OS >= 3.0
- Certain versions of QtWebKit